<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
		  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card class="box-card">
				<el-row>
					<el-col :span="6">
						<el-input placeholder="请输入内容" v-model="userInfo.username"  class="input-with-select">
						    <el-button slot="append" @click="queryAll" icon="el-icon-search"></el-button>
						  </el-input>
					</el-col>
					<el-col  :span="6">
						<el-button type="primary" @click="dialogFormVisible  = true">添加信息</el-button>
					</el-col>
				</el-row>
				
				<!-- 用户展示列表 -->
				 <el-table :data="userList" stripe style="width: 100%" border>
				   <el-table-column prop="id" label="编号" width="180"> </el-table-column>
				   <el-table-column  prop="username" label="姓名" width="180"></el-table-column>
				   <el-table-column prop="email" label="邮箱"> </el-table-column>
				   <el-table-column prop="touxiang" label="头像"> 
				   <template slot-scope="scope">
					   <el-image
					        style="width: 100px; height: 100px"
					        :src="'http://localhost:8081/ssmzhenghe/vueylupload?filename='+scope.row.touxiang"
					        :fit="fit"></el-image>
				   </template>
				   </el-table-column>
					<el-table-column prop="phoneNum"  label="手机号">  </el-table-column>
					<el-table-column label="操作"> 
					<template slot-scope="scope">
							<el-button-group >
							  <el-button class="cao" @click="editUsers(scope.row.id)" size="mini" type="primary" icon="el-icon-edit"></el-button>
							  <el-button class="cao" @click="rolUsers(scope.row.id)" size="mini" type="primary" icon="el-icon-star-off"></el-button>
							  <el-button class="cao" @click="delUsers(scope.row.id)" size="mini" type="primary" icon="el-icon-delete"></el-button>
							</el-button-group>
							</template>
					    </el-table-column>
				  </el-table>
				
			<el-pagination
			      @current-change="handleCurrentChange"
			      :current-page="current"
			      :page-size="4"
			      layout="total, prev, pager, next, jumper"
			      :total="total">
			    </el-pagination>	  
		</el-card>
		<!-- 添加用户信息 -->
		<el-dialog title="用户信息" :visible.sync="dialogFormVisible" @close="addreset('addUser')">
		  <el-form :model="addUser" :rules="addrules" ref="addUser" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="账号" prop="username">
		      <el-input v-model="addUser.username"></el-input>
		    </el-form-item>
			<el-form-item label="密码" prop="password">
			  <el-input type="password" v-model="addUser.password"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phoneNum">
			  <el-input v-model="addUser.phoneNum"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
			  <el-input v-model="addUser.email"></el-input>
			</el-form-item>
			<el-form-item label="日期" prop="datein">
			  <el-date-picker v-model="addUser.datein" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" >
			      </el-date-picker>
			</el-form-item>
			
			<el-form-item label="头像">
				<!--
					action你要上传的接口
					list-type：图片列表的展示样式
					on-preview：图片放大的函数
					on-remove：图片上传成功的函数
				-->
				<el-upload
					action="http://localhost:8081/ssmzhenghe/vueupload"
					list-type="picture-card"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove"
					:on-success="handlSuccess">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item>
			    <el-button type="primary" @click="addUsers()">添加用户</el-button>
			    <el-button @click="addreset('addUser')">取消</el-button>
			  </el-form-item>
		  </el-form>
		</el-dialog>
		
		<!-- 更新用户-->
		<el-dialog title="修改信息" :visible.sync="editdialogFormVisible" @close="editreset('editUser')">
		  <el-form :model="editUser" :rules="addrules" ref="editUser" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="账号" prop="username">
		      <el-input v-model="editUser.username"></el-input>
		    </el-form-item>
			<el-form-item label="密码" prop="password">
			  <el-input type="password" v-model="editUser.password"></el-input>
			</el-form-item>
			<el-form-item label="手机号" prop="phoneNum">
			  <el-input v-model="editUser.phoneNum"></el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="email">
			  <el-input v-model="editUser.email"></el-input>
			</el-form-item>
			<el-form-item label="日期" prop="datein">
			  <el-date-picker v-model="editUser.datein" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" >
			      </el-date-picker>
			</el-form-item>
			<el-upload
					action="http://localhost:8081/ssmzhenghe/vueupload"
					list-type="picture-card"
					:on-preview="handlePictureCardPreview"
					:on-remove="handleRemove"
					:on-success="handlSuccessedit"
					:file-list="fileList">
					<i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
					<img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog>
			</el-form-item>
			<el-form-item>
			    <el-button type="primary" @click="upeditUser()">修改</el-button>
			    <el-button @click="editreset('editUser')">取消</el-button>
			  </el-form-item>
		  </el-form>
		</el-dialog>
		
		<!-- 修改权限-->
		<el-dialog title="修改权限" :visible.sync="qxdialogFormVisible" @close="qxreset('qxUser')">
		  <el-form :model="editUser"  ref="qxUser" label-width="100px" class="demo-ruleForm">
		    <el-form-item label="账号" prop="username">
		      <el-input v-model="editUser.username" readonly></el-input>
		    </el-form-item>
			<el-checkbox-group v-model="rolist">
			   <el-checkbox v-for="it in rlist" :label="it.id">{{it.id}}</el-checkbox>
			  </el-checkbox-group>
				  <el-form-item>
				      <el-button type="primary" @click="qxEdit()">修改</el-button>
				      <el-button @click="qxreset('qxUser')">取消</el-button>
				    </el-form-item>
			
		  </el-form>
		</el-dialog>
	</div>
</template>
<script>
	import qs from 'qs'
	export default {
		data(){
			return {
			fileList:[],
			dialogImageUrl: '',
			dialogVisible: false,
			 userList: [],
			 userInfo:{
				 pageNum:1,
				 username:''
			 },
			 total:0,
			 current:0,
			 dialogFormVisible :false,
			 editdialogFormVisible:false,
			 qxdialogFormVisible:false,
			 addUser:{
				 username:'',
				 password:'',
				 phoneNum:'',
				 email:'',
				 datein:'',
				 touxiang:''
			 },
			 editUser:{
				 id:0,
				 username:'',
				 password:'',
				 phoneNum:'',
				 email:'',
				 datein:'',
				 touxiang:''
			 },
			 addrules:{
				 username: [
				          { required: true, message: '请输入账号', trigger: 'blur' },
				          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
				password: [
				         { required: true, message: '请输入密码', trigger: 'blur' },
				         { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],
				phoneNum: [
				         { required: true, message: '请输入手机号', trigger: 'blur' },
				         { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }],
				email: [
				         { required: true, message: '请输入邮箱', trigger: 'blur' },
				         { type:"email", message: '请输入正确的邮箱', trigger: 'blur' }],
				datein: [
				         { required: true, message: '请选择日期', trigger: 'blur' }]
			},
			rlist:[],
			rolist:[]
		}
	},
	mounted() {
		this.queryAll();
	},
	 methods: {
		 handlSuccessedit(response){
			 if (response.code == 200){
			 	this.editUser.touxiang=response.message;
				alert(this.editUser.touxiang)
			 }else{
			 	this.$message.error("修改失败")
			 }
		 },
		 handlSuccess(response){
			 if (response.code == 200){
				 this.addUser.touxiang=response.message;
			 }else{
				 this.$message.error("上传失败")
			 }
		 },
		 /* 文件上传*/
		handleRemove(file, fileList) {
			console.log(file, fileList);
		},
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},
		async queryAll(){
			var params = new URLSearchParams();
			params.append("pageNum",this.userInfo.pageNum);
			params.append("username",this.userInfo.username);
			const res = await this.$http.post('vueselectAllUsers',params);
			console.log(res)
			this.userList  = res.data.list;
			this.total = res.data.total;
		},
		handleCurrentChange(current){
			this.userInfo.pageNum=current;
			this.queryAll();
		},
		addreset(formtext){
			this.handleRemove(this.file,this.fileList);
			this.$refs[formtext].resetFields();
			this.dialogFormVisible = false;
		},
	    addUsers(){
			this.$refs.addUser.validate(async valid=>{
				if(valid){
					var params = new URLSearchParams();
					params.append("username",this.addUser.username);
					params.append("password",this.addUser.password);
					params.append("email",this.addUser.email);
					params.append("phoneNum",this.addUser.phoneNum);
					params.append("datein",this.addUser.datein);
					params.append("touxiang",this.addUser.touxiang);
					var res = await this.$http.post("vueAddUser",params);
					if(res.data.code==200){
						this.$message.success(res.data.message);
					}else{
						this.$message.error(res.data.message);
					}
					this.dialogFormVisible = false;
					this.queryAll();
				}else{
					this.$message.error("信息输入有误");
					/* this.dialogFormVisible = false;
					this.queryAll(); */
				}
			})
		},
		/* 修改重置 */
		editreset(formtext){
			this.$refs[formtext].resetFields();
			this.editdialogFormVisible = false;
		},
		/* 修改预数据 */
		async editUsers(id){
			this.fileList=[];
			var res = await  this.$http.get("/vueselectById?id="+id);
			if(res.data.code==200){
				/* res.data.t.datein = new Date(parseInt(Date.parse(new Date(res.data.t.datein)))); */
				alert(res.data.t.datein)
				this.editUser = res.data.t;
				this.editdialogFormVisible = true;
				var uu = [{url:'http://localhost:8081/ssmzhenghe/vueylupload?filename='+this.editUser.touxiang}];
				this.fileList = uu;
			}
		},
		upeditUser(){
			this.$refs.editUser.validate(async valid=>{
				if(valid){
					var params = new URLSearchParams();
					params.append("id",this.editUser.id);
					params.append("username",this.editUser.username);
					params.append("password",this.editUser.password);
					params.append("email",this.editUser.email);
					params.append("phoneNum",this.editUser.phoneNum);
					params.append("datein",this.editUser.datein);
					params.append("touxiang",this.editUser.touxiang);
					var res = await this.$http.post("vueupdateUser",params);
					if(res.data.code == 200){
						this.$message.success(res.data.message);
						this.editdialogFormVisible = false;
						this.queryAll();
					}else{
						this.$message.error(res.data.message)
					}
				}else{
					this.$message.error("信息有误")
				}
			})
		
		},
		delUsers(id){
			this.$confirm('此操作将永久删除用户'+id+', 是否继续?', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			          type: 'warning'
			        }).then(() => {
						this.del(id);
			        }).catch(() => {
			          this.$message({
			            type: 'info',
			            message: '已取消删除'
			          });          
			        });
		},
		async del(id){
			var res = await this.$http.get("/vueDelUser?id="+id);
			if(res.data.code == 200){
				this.$message.success(res.data.message);
				this.queryAll();
			}else{
				this.$message.error(res.data.message);
			}
		},
		/* 权限重置 */
		qxreset(formtext){
			this.$refs[formtext].resetFields();
			this.qxdialogFormVisible = false;
		},
		/* 查询所有角色信息并展示 */
		async rolUsers(id){
			var res = await  this.$http.get("/vueselectRoleById?id="+id);
			if(res.data.code==200){
				console.log(res.data.t)
				this.editUser = res.data.t;
				this.rlist = res.data.t.rList;
				var list = res.data.t.rolist;
				this.rolist = [];
				for(var i=0;i<list.length;i++){
					this.rolist.push(list[i].roleId)
				}
				this.qxdialogFormVisible = true;
			}
		},
		async qxEdit(){
			
			var params = new URLSearchParams();
			params.append("id",this.editUser.id);
			var str='';
			for(var i=0;i<this.rolist.length;i++){
				str+=this.rolist[i]+",";
			}
			params.append("roleId",str);
			var res = await  this.$http.post("/vueupdateqx",params);
			if(res.data.code==200){
				this.$message.success(res.data.message);
			}else{
				this.$message.error(res.data.message);
			}
			this.qxdialogFormVisible = false;
			this.queryAll();
		}
	}
}
</script>

<style>
.cao{
	width: 50px;
}
</style>
